<template>
	<view>
		<view class="">
			忘记密码页面
			<input type="text" placeholder="请输入手机号" v-model="phone" />
			<view class="yan">
				<input type="text" placeholder="请输入验证码" v-model='ya'/>
				<div>{{randomCode}}</div>
				<button @click="huo">{{yan}}</button>
			</view>
			<view class="">
				<button @click="add">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {yan} from '../../reques/api.js';
	import {login} from'../../reques/api.js';

	export default {
		data() {
			return {
				phone: '13888888888',
				yan: '获取验证码',
				randomCode:'',
				ya:''

			};
		},
		methods: {
			// 点击获取验证码
			huo() {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
				} else {
					if (this.phone.length == 11) {
						yan({
							mobile: this.phone,
						}).then(res => {
							 this.randomCode = Math.floor(1000 + Math.random() * 9000);
							console.log(this.randomCode);
						})
					} else {
						uni.showToast({
							title: '手机号输入错误，请输入正确的手机号',
							icon: 'none'
						})
					}
				}
			},
			// 点击登录按钮
			add(){
				// 如果验证码和输入框不一致操作
				if(this.ya!=this.randomCode){
					uni.showToast({
						title:"验证码错误，请重新输入",
						icon:'none'
					})
				}else{
					// 验证码和输入框一致进行操作
					uni.showToast({
						title:'验证码正确，登录成功',
						icon:'none'
					}),
					login({mobile:this.phone,password:'this.yan'}).then(res=>{
						uni.switchTab({
							url:'/pages/shou/shou'
						})
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	input {
		// border-bottom: 1px solid #000;
		margin-top: 20rpx;
	}

	.yan {
		display: flex;
		justify-content: space-between;

		// padding: 0 20rpx;
		input {
			width: 60%;
			height: 100rpx;
		}

		button {
			height: 100rpx;
			background-color: greenyellow;
		}
	}
</style>